/**
 * 登陆框
 */
import React from 'react'
import style from './Login.module.scss';

export default class SignInBox extends React.Component {
    constructor(props) {
        super(props);
        this.state = {}
    }

    /**
     * 设置各项表单元素的值
     */
    setFormValue = (e) => {
        this.setState({
            [e.target.name]: e.target.value
        })
    }

    submitSignUpInfo = (e) => {
        // 阻止表单默认的提交/刷新事件
        e.preventDefault();
        // 将表单数据转换为查询参数格式
        const params = new URLSearchParams();
        params.append('account', this.state.account);
        params.append('adminPwd', this.state.adminPwd);

        // 请求登录接口
        React.axios.post(`/store-manage/common/admin_sign-in.php`, params).then(res => {
            console.log(res.data);
            // 如果包含登录成功的文本，则跳转到管理首页
            if(typeof(res.data) === "object") {
                // 通过会话存储设置昵称
                sessionStorage.setItem('nickname', res.data.nickname);
                // 执行跳转到管理首页的方法
                this.props.goManagePage();
            } 
            // 提示服务器返回的错误
            else {
                alert(res.data);
            }
        });
    }

    render() {
        return (
            <div className={`${style.loginBox} ${style.signInBox}`}>
                <h1>管理员登录</h1>
                <form 
                    autoComplete="off"
                    onSubmit={this.submitSignUpInfo}
                >
                    <div>
                        <label>账号：</label>
                        <input 
                            name="account" 
                            type="text" 
                            placeholder="请输入账号或手机号" 
                            onChange={this.setFormValue} 
                        />
                    </div>
                    <div>
                        <label>密码：</label>
                        <input 
                            name="adminPwd" 
                            type="password" 
                            placeholder="请输入密码" 
                            onChange={this.setFormValue}  
                        />
                    </div>
                    <div  className={style.switchLogin}>
                        <p>还没有账号？前往<span onClick={() => {
                            this.props.switchLoginBox()
                        }}>注册</span>页面创建一个账号。</p>
                    </div>
                    <div>
                        <button type="submit">登录系统</button>
                    </div>
                </form>
            </div>
        );
    }
}